<template>
    <div class="w-full h-full">

        <div
            class="w-full h-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
            <div class="flex justify-end px-4 pt-4">

            </div>
            <div class="flex flex-col items-center pb-10">
                <img class="w-24 h-24 mb-3 rounded-full shadow-lg"
                    :src="'https://source.unsplash.com/random/?' + props.text" alt="Bonnie image" />
                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{{ props.text }}</h5>
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ props.pronunciation }}</span>
                <el-tag type="primary" v-if="props.result !== ''">
                    <span>
                        accuracy:
                    </span>:
                    {{ props.result }}
                </el-tag>
                <div class="flex mt-4 space-x-3 md:mt-6">
                    <span
                        @click="openDictionary"
                        class="inline-flex cursor-pointer items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        Learn More
                    </span>

                </div>
            </div>
        </div>

    </div>
</template>
 
<script setup>
import { ref } from 'vue'

const props = defineProps({
    text: {
        type: String,
        default: 'Hello World'
    },
    pronunciation: {
        type: String,
        default: 'Hello World'
    },
    result: {
        type: String,
        default: ''
    }
})
let openDictionary = () => {
    window.open('https://dictionary.cambridge.org/zhs/词典/英语-汉语-简体/' + props.text, '_blank')
}
</script> 
 
<style scoped></style>